<template>
  <div class="diagramRight" v-bind:style="{width:rightWidth+'%'}">
    <div class="title" v-show="cur_state=='real'">当日逐小时<span>{{title}}</span>变化</div>
    <div class="title" v-show="cur_state=='history'&&history_type=='year'">当年逐月<span>{{title}}</span></div>
    <div class="title" v-show="cur_state=='history'&&history_type=='month'">当月逐日<span>{{title}}</span></div>
    <div class="checkedRow">
      <p><span v-show="cur_state=='real'">对比曲线</span></p>
      <div style="display: inline-block" v-show="cur_state=='real'">
        <div class="checked">
          <input class='tgl tgl-light' id='right1' type='checkbox' v-model="isYestoday">
          <label class='tgl-btn' for='right1'></label>
          <span class="cityText" style="position: relative;top: -2px;" :class="[isYestoday?'active':'normal']">昨日</span>
        </div>
        <div class="checked">
          <input class='tgl tgl-light' id='right2' type='checkbox' v-model="isPreweek">
          <label class='tgl-btn' for='right2'></label>
          <span class="cityText" style="position: relative;top: -2px;" :class="[isPreweek?'active':'normal']">上周同日</span>
        </div>
        <div class="checked">
          <input class='tgl tgl-light' id='right3' type='checkbox' v-model="isMounth">
          <label class='tgl-btn' for='right3'></label>
          <span class="cityText" style="position: relative;top: -2px;" :class="[isMounth?'active':'normal']">近一月月均</span>
        </div>
      </div>
    </div>
    <div id="rightcharts"></div>
    <errorTip v-if="errorShow"></errorTip>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import MYCONFIG from '../../myconf'
  import eventBus from '../../util/event-bus'
  import errorTip from './NoTileRoad'
  import DataController from '../../control/dataCtroller'

  export default {
    name: "DiagramRight",
    components: {
      errorTip
    },
    data () {
      return {
        errorShow:false,
        rightWidth:50,
        myChart:null,//echarts画布
        cityCode:'110000',
        currentState:'realtime',//状态记录，实时：realtime，历史：history
        title:'延时指数',
        yAxisTip:'',
        isYestoday:false,
        isPreweek:false,
        isMounth:false,
        dataType:'W',//A:所有日期，W:工作日，H:非工作日
        nowTimeLegend:[],
        nowTimeData:[],
        compareLengend:[],
        serieData:[],
        today:[],
        yesData:[],
        weekData:[],
        monthData:[]
      }
    },
    mounted(){
      this.myChart = echarts.init(document.getElementById('rightcharts'));//初始化echarts图表画布
      this.controller = new DataController(this);
      this.cityCode = this.cur_city.code;
      this.getTimeData();
      eventBus.$on('setDiagramInterval',() => {
        this.clearLegend();
        this.updateData();
      });
      eventBus.$on("screenWChanged",(screenW) => {
        this.myChart.resize();
      });
    },
    computed: {
      ...mapGetters(['cur_city','cur_city_name','cur_state','cur_index_type','history_type','history_time','date_type','isProvinceshow','isCityshow','firstCityCode','secondCityCode']),
    },
    methods: {
      ...mapMutations(['updateProvinceState','updateCityState']),
      updateData(){
        if(this.cur_state == 'real'){
          if(this.isCityshow==false&&this.isProvinceshow==false&&this.isYestoday==false&&this.isPreweek==false&&this.isMounth==false){
            this.getTimeData();
          }else{
            if(this.isCityshow==true){
              this.getCityData();
            }else if(this.isProvinceshow==true){
              this.getProvinceData();
            }else{
              this.today = [];
              this.weekData = [];
              this.yesData = [];
              this.monthData = [];
              this.serieData = [];
              if(this.isPreweek==true&&this.isYestoday==true&&this.isMounth==true){
                this.updataSelfCompare('01','02','03');
              }else{
                if(this.isYestoday==true&&this.isPreweek==true&&this.isMounth==false){
                  this.updataSelfCompare('01','02');
                }else if(this.isYestoday==true&&this.isPreweek==false&&this.isMounth==true){
                  this.updataSelfCompare('01','03');
                }else if(this.isYestoday==false&&this.isPreweek==true&&this.isMounth==true){
                  this.updataSelfCompare('02','03');
                }else{
                  if(this.isYestoday==true){
                    this.getSelfCompData('01');
                  }else if(this.isPreweek==true){
                    this.getSelfCompData('02');
                  }else if(this.isMounth==true){
                    this.getSelfCompData('03');
                  }
                }
              }
            }
          }
        }
      },
      //当前城市实时数据(1小时)
      getTimeData(){
        var timestamp = Date.parse(new Date());
        let time = this.formatDateTime(timestamp);
        let _this = this;
        this.$http.post(MYCONFIG.service.root+'/analysis/'+this.currentState+'/cityCompare/right/'+this.cur_index_type+'/'+time, {
          Indextype: this.cur_index_type,
          timeStamp: time,
          codes: [this.cityCode]
        }, {emulateJSON: true}).then(response => {
          if(response){
//            console.log(response)
            _this.nowTimeData = [];
            _this.nowTimeLegend = ['06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'];

            let data = response.body.result[0].data;
            _this.nowTimeData = _this.controller.dataCompletion(_this.nowTimeLegend,data,_this.nowTimeData);
            // for(let i=0;i<data.length;i++){
            //   _this.nowTimeData.push(parseFloat(data[i].index).toFixed(2));
            // }
            _this.initLineChart();
          }
        }, response => {
          // alert("数据尚未计算完成！")
        });
      },
      //多城市对比
      getCityData(){
        var timestamp = Date.parse(new Date());
        let time = this.formatDateTime(timestamp);

        let _this = this;
        this.$http.post(MYCONFIG.service.root+'/analysis/realtime/cityCompare/right/'+this.cur_index_type+'/'+time, {
          Indextype: this.cur_index_type,
          timeStamp: time,
          codes: [this.cityCode,this.firstCityCode,this.secondCityCode]
        }, {emulateJSON: true}).then(response => {
          if(response){
            _this.nowTimeLegend = ['06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'];
            let result = response.body.result;
            let city = [[],[],[]];
            city[0] = _this.controller.dataCompletion(_this.nowTimeLegend,result[0].data,city[0]);
            city[1] = _this.controller.dataCompletion(_this.nowTimeLegend,result[1].data,city[1]);
            if(result.length>2){city[2] = _this.controller.dataCompletion(_this.nowTimeLegend,result[2].data,city[2]);}
            // for(let i=0;i<result[0].data.length;i++){
            //   city[0].push(parseFloat(result[0].data[i].index).toFixed(2));
            //   if(result[1].data[i])city[1].push(parseFloat(result[1].data[i].index).toFixed(2));
            //   if(result[2].data[i])city[2].push(parseFloat(result[2].data[i].index).toFixed(2));
            // }

            for(let j=0;j<result.length;j++){
              _this.compareLengend.push(result[j].cityName);
              var serie = {
                name:result[j].cityName,
                type:'line',
                smooth:true,
                symbol: 'none',
                data:city[j]
              };

              _this.serieData.push(serie);
            }
            _this.initCompareChart();
          }
        }, response => {
          // alert("数据尚未计算完成！")
        });
      },
      //行政区划对比
      getProvinceData(){
        var timestamp = Date.parse(new Date());
        let time = this.formatDateTime(timestamp);

        let _this = this;
        this.$http.post(MYCONFIG.service.root+'/analysis/realtime/areaCompare/right/'+this.cityCode+'/'+this.cur_index_type+'/'+time, {emulateJSON: true}).then(response => {
          if(response){
            _this.nowTimeLegend = ['06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'];
            let result = response.data.result;

            for(let i=0;i<result.length;i++){
              _this.compareLengend.push(result[i].areaName);
              let prodata = [];
              prodata = _this.controller.dataCompletion(_this.nowTimeLegend,result[i].data,prodata);
              // for(let j=0;j<result[i].data.length;j++){
                // prodata.push(parseFloat(result[i].data[j].index).toFixed(2));
              // }

              var serie = {
                name:result[i].areaName,
                type:'line',
                smooth:true,
                symbol: 'none',
                data:prodata
              };

              _this.serieData.push(serie);
            }
            _this.initCompareChart();
          }
        }, response => {
          // alert("数据尚未计算完成！")
        });
      },
      //当前城市自对比（昨日，上周同日，近一月月均）
      getSelfCompData(type){
        this.today = [];
        var timestamp = Date.parse(new Date());
        let time = this.formatDateTime(timestamp);
        let _this = this;
        this.$http.post(MYCONFIG.service.root+'/analysis/selfCompare/realtime/'+time, {
          indexType: this.cur_index_type,
          cityCode: this.cityCode,
          compareType:type,//01:昨日，02:上周同日,03:近一月月均
          granularity:'HOUR'
        }, {emulateJSON: true}).then(response => {
          if(response){
            let result = response.data.result;
            _this.nowTimeLegend = ['06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'];

            _this.today = _this.controller.dataCompletion(_this.nowTimeLegend,result.today,_this.today);
            if(type == '01'){
              _this.yesData = _this.controller.dataCompletion(_this.nowTimeLegend,result.yesterday,_this.yesData);
            }else if(type == '02'){
              _this.weekData = _this.controller.dataCompletion(_this.nowTimeLegend,result.lastweek,_this.weekData);
            }else{
              _this.monthData = _this.controller.dataCompletion(_this.nowTimeLegend,result.lastmonth,_this.monthData);
            }
            // for(let i=0;i<result.today.length;i++){
            //   _this.today.push(parseFloat(result.today[i].index).toFixed(2));
            //   if(type == '01'){
            //     if(result.yesterday.length>0){
            //       if(result.yesterday[i])_this.yesData.push(parseFloat(result.yesterday[i].index).toFixed(2));
            //     }
            //   }else if(type == '02'){
            //     if(result.lastweek.length>0){
            //       if(result.lastweek[i])_this.weekData.push(parseFloat(result.lastweek[i].index).toFixed(2));
            //     }
            //   }else{
            //     if(result.lastmonth.length>0){
            //       if(result.lastmonth[i])_this.monthData.push(parseFloat(result.lastmonth[i].index).toFixed(2));
            //     }
            //   }
            // }

            let ser1 = {
              name:'今日',
              type:'line',
              smooth:true,
              symbol: 'none',
              data:_this.today
            };
            let ser2={},ser3={},ser4={};
            if(_this.isYestoday==true&&_this.isPreweek==true&&_this.isMounth==true){
              _this.compareLengend = ['今日','昨日','上周同日','近一月月均'];
              ser2= {
                name:'昨日',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:_this.yesData
              };
              ser3= {
                name:'上周同日',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:_this.weekData
              };
              ser4= {
                name:'近一月月均',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:_this.monthData
              };
              _this.serieData.push(ser1);
              _this.serieData.push(ser2);
              _this.serieData.push(ser3);
              _this.serieData.push(ser4);
            }else if(_this.isYestoday==true&&_this.isPreweek==true&&_this.isMounth==false){
              _this.compareLengend = ['今日','昨日','上周同日'];
              ser2= {
                name:'昨日',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:_this.yesData
              };
              ser3= {
                name:'上周同日',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:_this.weekData
              };
              _this.serieData.push(ser1);
              _this.serieData.push(ser2);
              _this.serieData.push(ser3);
            }else if(_this.isYestoday==true&&_this.isPreweek==false&&_this.isMounth==true){
              _this.compareLengend = ['今日','昨日','近一月月均'];
              ser2= {
                name:'昨日',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:_this.yesData
              };
              ser3= {
                name:'近一月月均',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:_this.monthData
              };
              _this.serieData.push(ser1);
              _this.serieData.push(ser2);
              _this.serieData.push(ser3);
            }else if(_this.isYestoday==false&&_this.isPreweek==true&&_this.isMounth==true){
              _this.compareLengend = ['今日','上周同日','近一月月均'];
              ser2= {
                name:'上周同日',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:_this.weekData
              };
              ser3= {
                name:'近一月月均',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:_this.monthData
              };
              _this.serieData.push(ser1);
              _this.serieData.push(ser2);
              _this.serieData.push(ser3);
            }else{
              if(type=='01'){
                _this.compareLengend = ['今日','昨日'];
                ser2= {
                  name:'昨日',
                  type:'line',
                  smooth:true,
                  symbol: 'none',
                  data:_this.yesData
                };
                _this.serieData.push(ser1);
                _this.serieData.push(ser2);
              }else if(type == '02'){
                _this.compareLengend = ['今日','上周同日'];
                ser2= {
                  name:'上周同日',
                  type:'line',
                  smooth:true,
                  symbol: 'none',
                  data:_this.weekData
                };
                _this.serieData.push(ser1);
                _this.serieData.push(ser2);
              }else{
                _this.compareLengend = ['今日','近一月月均'];
                ser2= {
                  name:'近一月月均',
                  type:'line',
                  smooth:true,
                  symbol: 'none',
                  data:_this.monthData
                };
                _this.serieData.push(ser1);
                _this.serieData.push(ser2);
              }
            }

            _this.initCompareChart();

          }
        }, response => {
          // alert("数据尚未计算完成！")
        });
      },
      //历史城市数据
      getHistoryData(){
        let option={};
        if(this.history_type == 'year'){
          option={
            indexType:this.cur_index_type,
            dimention:'04',//04,年月
            year:this.history_time.year,
            dateTag:this.dataType,
            isBar:'N',
            codes:[this.cityCode]
          }
        }else{
          option={
            indexType:this.cur_index_type,
            dimention:'03',//03,月日
            year:this.history_time.year,
            month:this.history_time.month,
            dateTag:this.dataType,
            isBar:'N',
            codes:[this.cityCode]
          }
        }

        let _this = this;
        this.$http.post(MYCONFIG.service.root+'/analysis/compare/city/history',option, {emulateJSON: true}).then(response => {
          if(response) {
            if(this.history_type == 'year'){
              _this.nowTimeLegend = ['01','02','03','04','05','06','07','08','09','10','11','12'];
            }else{
              if(this.history_time.month=='02'){
                _this.nowTimeLegend = ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28'];
              }else if(this.history_time.month=='04'||this.history_time.month=='06'||this.history_time.month=='09'||this.history_time.month=='11'){
                _this.nowTimeLegend = ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'];
              }else{
                _this.nowTimeLegend = ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'];
              }
            }

            let data = response.data.result[0].data;
            for(let i=0;i<data.length;i++){
              _this.nowTimeData.push(parseFloat(data[i].index).toFixed(2))
            }
            _this.initLineChart();
          }
        }, response => {
          // alert("数据尚未计算完成！")
        });
      },
      //多城市对比-历史
      getHistoryCity(){
        let option={};
        if(this.history_type == 'year'){
          option={
            indexType:this.cur_index_type,
            dimention:'04',//04,年月
            year:this.history_time.year,
            dateTag:this.dataType,
            isBar:'N',
            codes:[this.cityCode,this.firstCityCode,this.secondCityCode]
          }
        }else{
          option={
            indexType:this.cur_index_type,
            dimention:'03',//03,月日
            year:this.history_time.year,
            month:this.history_time.month,
            dateTag:this.dataType,
            isBar:'N',
            codes:[this.cityCode,this.firstCityCode,this.secondCityCode]
          }
        }
        let _this = this;
        this.$http.post(MYCONFIG.service.root+'/analysis/compare/city/history',option, {emulateJSON: true}).then(response => {
          if(response) {
            if(this.history_type == 'year'){
              _this.nowTimeLegend = ['01','02','03','04','05','06','07','08','09','10','11','12'];
            }else{
              if(this.history_time.month=='02'){
                _this.nowTimeLegend = ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28'];
              }else if(this.history_time.month=='04'||this.history_time.month=='06'||this.history_time.month=='09'||this.history_time.month=='11'){
                _this.nowTimeLegend = ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'];
              }else{
                _this.nowTimeLegend = ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'];
              }
            }
            let result = response.data.result;
            let city = [[],[],[]];
            for(let i=0;i<result[0].data.length;i++){
              city[0].push(parseFloat(result[0].data[i].index).toFixed(2));
              city[1].push(parseFloat(result[1].data[i].index).toFixed(2));
              if(result.length>2)city[2].push(parseFloat(result[2].data[i].index).toFixed(2));
            }

            for(let j=0;j<result.length;j++){
              _this.compareLengend.push(result[j].name);
              var serie = {
                name:result[j].name,
                type:'line',
                smooth:true,
                symbol: 'none',
                data:city[j]
              };

              _this.serieData.push(serie);
            }
            _this.initCompareChart();
          }
        }, response => {
          // alert("数据尚未计算完成！")
        });
      },
      //行政区划对比-历史
      getHistoryProvince(){
        let option={};
        if(this.history_type == 'year'){
          option={
            indexType:this.cur_index_type,
            dimention:'04',
            year:this.history_time.year,
            dateTag:this.dataType,
            cityCode:this.cityCode
          }
        }else{
          option={
            indexType:this.cur_index_type,
            dimention:'03',
            year:this.history_time.year,
            month:this.history_time.month,
            dateTag:this.dataType,
            cityCode:this.cityCode
          }
        }
        let _this = this;
        this.$http.post(MYCONFIG.service.root+'/analysis/compare/area/history',option, {emulateJSON: true}).then(response => {
          if(response) {
            if(this.history_type == 'year'){
              _this.nowTimeLegend = ['01','02','03','04','05','06','07','08','09','10','11','12'];
            }else{
              if(this.history_time.month=='02'){
                _this.nowTimeLegend = ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28'];
              }else if(this.history_time.month=='04'||this.history_time.month=='06'||this.history_time.month=='09'||this.history_time.month=='11'){
                _this.nowTimeLegend = ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'];
              }else{
                _this.nowTimeLegend = ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'];
              }
            }
            let result = response.data.result;
            for(let i=0;i<result.length;i++){
              _this.compareLengend.push(result[i].name);
              let prodata = [];
              for(let j=0;j<result[i].data.length;j++){
                prodata.push(parseFloat(result[i].data[j].index).toFixed(2));
              }

              var serie = {
                name:result[i].name,
                type:'line',
                smooth:true,
                symbol: 'none',
                data:prodata
              };

              _this.serieData.push(serie);
            }
            _this.initCompareChart();
          }
        }, response => {
          // alert("数据尚未计算完成！")
        });
      },
      //type1:昨日，type2:上周同日，type3：近一月月均
      updataSelfCompare(type1,type2,type3){
        var timestamp = Date.parse(new Date());
        let time = this.formatDateTime(timestamp);
        let _this = this;
        this.$http.post(MYCONFIG.service.root+'/analysis/selfCompare/realtime/'+time, {
          indexType: this.cur_index_type,
          cityCode: this.cityCode,
          compareType:type1,//01:昨日，02:上周同日,03:近一月月均
          granularity:'HOUR'
        }, {emulateJSON: true}).then(response => {
          if(response){
            let hour = time.slice(8,10);
            _this.nowTimeLegend = ['06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'];

            let result = response.data.result;
            _this.today = _this.controller.dataCompletion(_this.nowTimeLegend,result.today,_this.today);
            if(type1=='01'){
              _this.yesData = _this.controller.dataCompletion(_this.nowTimeLegend,result.yesterday,_this.yesData);
            }else{
              _this.weekData = _this.controller.dataCompletion(_this.nowTimeLegend,result.lastweek,_this.weekData);
            }
            // for(let i=0;i<result.today.length;i++){
            //   _this.today.push(parseFloat(result.today[i].index).toFixed(2));
            //   if(type1=='01'){
            //     if(result.yesterday.length>0){
            //       if(result.yesterday[i]) _this.yesData.push(parseFloat(result.yesterday[i].index).toFixed(2));
            //     }
            //   }else{
            //     if(result.lastweek.length>0){
            //       if(result.lastweek[i]) _this.weekData.push(parseFloat(result.lastweek[i].index).toFixed(2));
            //     }
            //   }
            // }

            _this.$http.post(MYCONFIG.service.root+'/analysis/selfCompare/realtime/'+time, {
              indexType: _this.cur_index_type,
              cityCode: _this.cityCode,
              compareType:type2,//01:昨日，02:上周同日,03:近一月月均
              granularity:'HOUR'
            }, {emulateJSON: true}).then(response => {
              if(response) {
                let result = response.data.result;
                if(type2=='02'){
                  _this.weekData = _this.controller.dataCompletion(_this.nowTimeLegend,result.lastweek,_this.weekData);
                }else{
                  _this.monthData = _this.controller.dataCompletion(_this.nowTimeLegend,result.lastmonth,_this.monthData);
                }
                // for (let i = 0; i < result.today.length; i++) {
                //   if(type2=='02'){
                //     if(result.lastweek.length>0){
                //       if(result.lastweek[i]) _this.weekData.push(parseFloat(result.lastweek[i].index).toFixed(2));
                //     }
                //   }else{
                //     if(result.lastmonth.length>0){
                //       if(result.lastmonth[i])_this.monthData.push(parseFloat(result.lastmonth[i].index).toFixed(2));
                //     }
                //   }
                // }

                if(type3){
                  _this.$http.post(MYCONFIG.service.root+'/analysis/selfCompare/realtime/'+time, {
                    indexType: _this.cur_index_type,
                    cityCode: _this.cityCode,
                    compareType:type3,//01:昨日，02:上周同日,03:近一月月均
                    granularity:'HOUR'
                  }, {emulateJSON: true}).then(response => {
                    if (response) {
                      let result = response.data.result;
                      _this.monthData = _this.controller.dataCompletion(_this.nowTimeLegend,result.lastmonth,_this.monthData);
                      // for (let i = 0; i < result.lastmonth.length; i++) {
                      //   if (result.lastmonth[i]) _this.monthData.push(parseFloat(result.lastmonth[i].index).toFixed(2));
                      // }

                      _this.compareLengend = ['今日','昨日','上周同日','近一月月均'];
                      let ser1 = {
                        name:'今日',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        data:_this.today
                      },ser2= {
                        name:'昨日',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        data:_this.yesData
                      },ser3= {
                        name:'上周同日',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        data:_this.weekData
                      },ser4= {
                        name:'近一月月均',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        data:_this.monthData
                      };
                      _this.serieData.push(ser1);
                      _this.serieData.push(ser2);
                      _this.serieData.push(ser3);
                      _this.serieData.push(ser4);
                      _this.initCompareChart();
                    }
                  }, response => {
                    // alert("数据尚未计算完成！")
                  });
                }else{
                  if(type1=='01'){
                    if(type2=='02'){
                      _this.compareLengend = ['今日','昨日','上周同日'];
                      let ser1 = {
                        name:'今日',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        data:_this.today
                      },ser2= {
                        name:'昨日',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        data:_this.yesData
                      },ser3= {
                        name:'上周同日',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        data:_this.weekData
                      };
                      _this.serieData.push(ser1);
                      _this.serieData.push(ser2);
                      _this.serieData.push(ser3);
                    }else{
                      _this.compareLengend = ['今日','昨日','近一月月均'];
                      let ser1 = {
                        name:'今日',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        data:_this.today
                      },ser2= {
                        name:'昨日',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        data:_this.yesData
                      },ser3= {
                        name:'近一月月均',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        data:_this.monthData
                      };
                      _this.serieData.push(ser1);
                      _this.serieData.push(ser2);
                      _this.serieData.push(ser3);
                    }
                  }else{
                    _this.compareLengend = ['今日','上周同日','近一月月均'];
                    let ser1 = {
                      name:'今日',
                      type:'line',
                      smooth:true,
                      symbol: 'none',
                      data:_this.today
                    },ser2= {
                      name:'上周同日',
                      type:'line',
                      smooth:true,
                      symbol: 'none',
                      data:_this.weekData
                    },ser3= {
                      name:'近一月月均',
                      type:'line',
                      smooth:true,
                      symbol: 'none',
                      data:_this.monthData
                    };
                    _this.serieData.push(ser1);
                    _this.serieData.push(ser2);
                    _this.serieData.push(ser3);
                  }
                  _this.initCompareChart();
                }

              }
            }, response => {
              // alert("数据尚未计算完成！")
            });
          }
        }, response => {
          // alert("数据尚未计算完成！")
        });
      },
      //时间戳转换
      formatDateTime(timeStamp){
        let date = new Date();
        date.setTime(timeStamp);
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var mm = date.getMinutes();
        mm = mm < 10 ? ('0' + mm) : mm;
        var s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;

        return ''+ y +  m  + d + h + mm + s
      },
      initLineChart(){
        // 指定图表的配置项和数据
        let option = {
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.5)'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['rgba(255,255,250,0.10)'],
              }
            },
            data: this.nowTimeLegend
          },
          yAxis: {
            type: 'value',
            name:this.yAxisTip,
            nameLocation:'end',
            nameGap:'5',
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.5)'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['rgba(255,255,250,0.10)'],
              }
            },
          },
          grid: {
            top: 20,
            left: 50,
            right:50,
            bottom:45
          },
          series: [
            {
              name:this.title,
              type:'line',
              smooth:true,
              symbol: 'none',
              itemStyle : {
                normal : {
                  lineStyle:{
                    color:'#ff003b'
                  }
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8,
                    [
                      {offset: 0, color: 'rgba(255,0,59, 0.5)'},
                      {offset: 1,color: 'rgba(255,0,59, 0)'}
                    ]),
                }
              },
              data: this.nowTimeData
            }
          ]
        };

        this.myChart.clear();
        this.myChart.setOption(option);
      },
      initCompareChart(){
        // 指定图表的配置项和数据
        let option = {
          color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: this.compareLengend,
            bottom: 20,
            textStyle: {
              color: 'rgba(255,255,255,0.5)'
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.5)'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['rgba(255,255,250,0.10)'],
              }
            },
            data: this.nowTimeLegend
          },
          yAxis: {
            type: 'value',
            name:this.yAxisTip,
            nameLocation:'end',
            nameGap:'5',
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.5)'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['rgba(255,255,250,0.10)'],
              }
            },
          },
          grid: {
            top: 15,
            left: 50,
            right: 50,
            bottom:80
          },
          series: this.serieData
        };

        this.myChart.clear();
        this.myChart.setOption(option);
      },
      //重置会初始面板
      reset(){
        this.clearLegend();
        if(this.isProvinceshow == false&&this.isCityshow == false&&this.isYestoday == false&&this.isPreweek == false&&this.isMounth == false){
          this.today = [];
          this.yesData = [];
          this.weekData = [];
          this.monthData = [];
          if(this.cur_state=='real'){
            this.getTimeData();
          }else{
            this.getHistoryData();
          }
        }

      },
      clearLegend(){
        //清除图表图例
        this.nowTimeLegend = [];
        this.compareLengend= [];
        this.nowTimeData= [];
        //清除对比图表信息
        this.serieData = [];
      },
      clearStatus(){
        this.clearLegend();
        this.updateCityState(false);
        this.updateProvinceState(false);
        this.isYestoday = false;
        this.isPreweek = false;
        this.isMounth = false;

        //重置echarts大小
        this.rightWidth = 50;
        this.$nextTick(() => {
          this.myChart = echarts.init(document.getElementById('rightcharts'));
          this.myChart.resize();
        });

      }
    },
    watch: {
      //当前状态，实时-历史
      'cur_state':function (val,oldVal) {
        this.clearStatus();
        if(val=='real'){
          this.rightWidth = this.cur_index_type=='03'?100:50;
          this.getTimeData();
        }else{
          this.rightWidth = 50;
          this.getHistoryData();
        }
        this.$nextTick(() => {
          this.myChart = echarts.init(document.getElementById('rightcharts'));
          this.myChart.resize();
        });
      },
      //当前选中城市
      'cur_city_name': {
        handler: function (val, oldVal) {
          if(val!=oldVal){
            this.clearStatus();
            this.cityCode = this.cur_city.code;
            if(this.cur_state=='real'){
              this.rightWidth = this.cur_index_type=='03'?100:50;
              this.getTimeData();
            }else{
              this.rightWidth = 50;
              this.getHistoryData();
            }
            this.$nextTick(() => {
              this.myChart = echarts.init(document.getElementById('rightcharts'));
              this.myChart.resize();
            });
          }
        },
        deep: true
      },
      //指数状态，拥堵延时比例-拥堵指数-延时指数
      'cur_index_type':function(val, oldVal){
        switch (val){
          case '01':
            this.title = "延时指数";
            this.yAxisTip = '';
            break;
          case '02':
            this.title = "拥堵里程比例";
            this.yAxisTip = '%';
            break;
          case '03':
            this.title = "时空拥堵指数";
            this.yAxisTip = '%';
            break;
        }
        this.clearStatus();
        if(this.cur_state=='real'){
          if(val == '03'){
            this.rightWidth = 100;
            this.$nextTick(() => {
              this.myChart = echarts.init(document.getElementById('rightcharts'));
              this.myChart.resize();
            });
          }else if(oldVal === '03'&&val !== '03'){
            this.$nextTick(() => {
              this.myChart = echarts.init(document.getElementById('rightcharts'));
              this.myChart.resize();
            });
          }
          this.getTimeData();
        }else{
          this.getHistoryData();
        }
      },
      //历史-年月状态发生改变
      'history_type':function(val, oldVal){
        this.clearStatus();
        this.getHistoryData();
      },
      //历史-年月时间发生改变
      'history_time':function (val, oldVal) {
        this.clearStatus();
        this.getHistoryData();
      },
      'date_type':function(val, oldVal){
        switch(val){
          case 'all':
            this.dataType = 'A';
            break;
          case 'work':
            this.dataType = 'W';
            break;
          case 'nonwork':
            this.dataType = 'H';
            break;
        }

        this.clearStatus();
        this.getHistoryData();
      },
      //城市对比-城市1
      'firstCityCode':function (val,oldVal) {
        if(this.isCityshow == false) return;
        if(val!=oldVal){
          this.updateProvinceState(false);
          this.isYestoday = false;
          this.isPreweek = false;
          this.clearLegend();
          if(this.cur_state=='real'){
            this.getCityData();
          }else{
            this.getHistoryCity();
          }
        }
      },
      //城市对比-城市2
      'secondCityCode':function (val,oldVal) {
        if(this.isCityshow == false) return;
        if(val!=oldVal){
          this.updateProvinceState(false);
          this.isYestoday = false;
          this.isPreweek = false;
          this.clearLegend();
          if(this.cur_state=='real'){
            this.getCityData();
          }else{
            this.getHistoryCity();
          }
        }
      },
      'isCityshow': function (val, oldVal){
        if(val == true){
          this.clearLegend();

          this.updateProvinceState(false);
          this.isYestoday = false;
          this.isPreweek = false;
          this.isMounth = false;
          if(this.cur_state=='real'){
            this.getCityData();
          }else{
            this.getHistoryCity();
          }
        }
        this.reset();
      },
      'isProvinceshow': function (val, oldVal){
        if(val == true){
          this.clearLegend();

          this.updateCityState(false);
          this.isYestoday = false;
          this.isPreweek = false;
          this.isMounth = false;
          if(this.cur_state=='real'){
            this.getProvinceData();
          }else{
            this.getHistoryProvince();
          }
        }
        this.reset();
      },
      isYestoday:function(val, oldVal){
        if(val == true){
          this.clearLegend();
          this.updateCityState(false);
          this.updateProvinceState(false);
          this.getSelfCompData('01');
        }else{
          if(this.isPreweek == false&&this.isMounth == false){
            this.reset();
          }else{
            if(this.isPreweek == true&&this.isMounth == false){
              this.yesData = [];
              this.weekData = [];
              this.monthData = [];
              this.serieData = [];
              this.getSelfCompData('02');
            }else if(this.isPreweek == false&&this.isMounth == true){
              this.yesData = [];
              this.weekData = [];
              this.monthData = [];
              this.serieData = [];
              this.getSelfCompData('03');
            }else{
              this.yesData = [];
              this.serieData = [];
              let ser1= {
                name:'今日',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:this.today
              };
              let ser2= {
                name:'近一月月均',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:this.monthData
              };
              let ser3= {
                name:'上周同日',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:this.weekData
              };
              this.compareLengend = ['今日','上周同日','近一月月均']
              this.serieData.push(ser1);
              this.serieData.push(ser3);
              this.serieData.push(ser2);
              this.initCompareChart();
            }
          }
        }
      },
      isPreweek:function(val, oldVal){
        if(val == true){
          this.clearLegend();
          this.updateCityState(false);
          this.updateProvinceState(false);
          this.getSelfCompData('02');
        }else {
          if (this.isYestoday == false && this.isMounth == false) {
            this.reset();
          } else {
            if (this.isYestoday == true && this.isMounth == false) {
              this.yesData = [];
              this.weekData = [];
              this.monthData = [];
              this.serieData = [];
              this.getSelfCompData('01');
            } else if(this.isYestoday == false && this.isMounth == true){
              this.yesData = [];
              this.weekData = [];
              this.monthData = [];
              this.serieData = [];
              this.getSelfCompData('03');
            }else{
              this.weekData = [];
              this.serieData = [];
              let ser1= {
                name:'今日',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:this.today
              };
              let ser2= {
                name:'近一月月均',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:this.monthData
              };
              let ser3= {
                name:'昨日',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:this.yesData
              };
              this.compareLengend = ['今日','昨日','近一月月均']
              this.serieData.push(ser1);
              this.serieData.push(ser3);
              this.serieData.push(ser2);
              this.initCompareChart();
            }
          }
        }
      },
      isMounth:function(val, oldVal){
        if(val == true){
          this.clearLegend();
          this.updateCityState(false);
          this.updateProvinceState(false);
          this.getSelfCompData('03');
        }else {
          if (this.isYestoday == false && this.isPreweek == false) {
            this.reset();
          } else {
            if (this.isYestoday == true && this.isPreweek == false) {
              this.yesData = [];
              this.weekData = [];
              this.monthData = [];
              this.serieData = [];
              this.getSelfCompData('01');
            } else if(this.isYestoday == false && this.isPreweek == true){
              this.yesData = [];
              this.weekData = [];
              this.monthData = [];
              this.serieData = [];
              this.getSelfCompData('02');
            }else{
              this.monthData = [];
              this.serieData = [];
              let ser1= {
                name:'今日',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:this.today
              };
              let ser2= {
                name:'昨日',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:this.yesData
              };
              let ser3= {
                name:'上周同日',
                type:'line',
                smooth:true,
                symbol: 'none',
                data:this.weekData
              };
              this.compareLengend = ['今日','昨日','上周同日']
              this.serieData.push(ser1);
              this.serieData.push(ser2);
              this.serieData.push(ser3);
              this.initCompareChart();
            }
          }
        }
      },
    }
  }
</script>

<style scoped>
  @import "../../common/checked.scss";
  .diagramRight{
    /*width: 50%;*/
    height: 100%;
    float: right;
    padding-top: 15px;
  }
  .title{
    width: 235px;
    height: 20px;
    font-family: Microsoft YaHei;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.21;
    letter-spacing: normal;
    text-align: center;
    color: #ff003b;
    margin: 0 auto;
  }
  .checked{
    display:inline-block ;
    margin-left: 15px;
  }
  .checkedRow{
    margin-left: 50px;
  }
  .checkedRow p{
    display:inline-block ;
    position: relative;
    top: -2px;
  }
  .normal{
    color: #8e8e8e;
  }
  .active{
    color: white;
  }
  #rightcharts{
    width:100% ;
    height: calc(100% - 37px);
  }
  .tgl-light + .tgl-btn {
    background: #525252;
  }
  .tgl:checked + .tgl-btn:after {
    left: 50%;
    background: #ff003b;
  }
</style>
